import React from 'react';

import { Purchase } from '@/entities/profile';
import { Button, ButtonVariants, Title } from '@/shared/ui';
import { ModalPage } from '@/widgets/ModalPage';
import classNames from 'classnames';
import { useScrollLock, useWindowSize } from 'usehooks-ts';

import cs from './Purchases.module.scss';

export const Purchases = () => {
  const [all, setAll] = React.useState(false);
  const [expanded, setExpanded] = React.useState<boolean>(false);
  const { lock, unlock } = useScrollLock();

  const { width } = useWindowSize();

  const containerClass = classNames(cs.purchases, {
    [cs.expand]: all,
    [cs.collapse]: !all,
  });

  React.useEffect(() => {
    if (expanded) {
      lock();
    }
    return () => {
      unlock();
    };
  });

  return (
    <>
      {!expanded && (
        <div className={cs.container}>
          <section className={cs.section}>
            <Title size="l" title="История" />
            {/* <Button className={cs.btn} onClick={() => setExpanded(true)} variant={ButtonVariants.Link}>
              Все
            </Button> */}
          </section>
          <div className={containerClass}>
            {all ? (
              <>
                <Purchase date="25 августа" isFirst price={399} time="17:23" type="Подключение" />
                <Purchase date="19 декабря" price={99} time="20:09" type="Автоопределение" />
                <Purchase date="25 августа" price={399} time="17:23" type="Подключение" />
                <Purchase date="19 декабря" isLast price={99} time="20:09" type="Автоопределение" />
              </>
            ) : (
              <>
                <Purchase date="25 августа" isFirst price={399} time="17:23" type="Подключение" />
                <Purchase date="19 декабря" isLast price={99} time="20:09" type="Автоопределение" />
              </>
            )}
          </div>
          <Button
            data-testid="button-show_all"
            onClick={(e: { preventDefault: () => void }) => {
              e.preventDefault();
              width < 1024 ? setExpanded(true) : setAll(!all);
            }}
            style={{ alignSelf: 'center' }}
            variant={ButtonVariants.Link}
          >
            {all ? 'Скрыть' : '  Показать все'}
          </Button>
        </div>
      )}
      <ModalPage handleClose={() => setExpanded(false)} isMobile isOpen={expanded}>
        <Title size="modal-size" style={{ marginBottom: '24px' }} title="История" />
        <Purchase date="25 августа" isFirst price={399} time="17:23" type="Подключение" />
        <Purchase date="19 декабря" price={99} time="20:09" type="Автоопределение" />
        <Purchase date="25 августа" price={399} time="17:23" type="Подключение" />
        <Purchase date="19 декабря" isLast price={99} time="20:09" type="Автоопределение" />
      </ModalPage>
    </>
  );
};
